
import React from 'react'
import Store from "./Store";
import {Divider,Table,Message,Modal,Button} from 'antd'
import LinkButton from "../../../../components/common/LinkButton";
import {observer} from 'mobx-react'
import {Delete} from "../../../../api/work/config/cloud/CloudApi";

@observer
class ComTable extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        Store.fetchRecords();
    }

    handleDelete = (record) => {
        Modal.confirm({
            title: '删除确认',
            content: `确定要删除云图【${record['name']}】?`,
            onOk: () => {
                return Delete({id:record.id}).then(response => {
                    if (response.data.code === 200){
                        Store.fetchRecords();
                        Message.success(response.data.msg);
                    }
                })
            }
        })

    };

    //处理排序、分页
    onChange = (pagination, filters, sorter, extra) => {
        if (sorter.field){
            Store.searchMap["sort"] = (sorter.order === "descend" ? "-" : "") + sorter.field;
        }
        Store.page = pagination.current;
        Store.pageSize = pagination.pageSize;
        Store.fetchRecords();
    };

    columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            sorter:true
        },
        {
            title: '云图名称',
            dataIndex: 'name',
        },
        {
            title: '描述',
            dataIndex: 'description',
        },
        {
            title: '操作',
            width: 300,
            render: info => (
                <span>
                    <LinkButton auth="host.host.edit" onClick={() => Store.showForm(info)}>编辑</LinkButton>
                    <Divider type="vertical"/>
                    <LinkButton auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
                 </span>
            )
        }
    ];

    render() {
        return (
            <Table
                rowKey="id"
                loading={Store.isFetching}
                dataSource={Store.records}
                onChange={this.onChange}
                pagination={{
                    current:Store.page,
                    //是否可以改变 pageSize
                    showSizeChanger: true,
                    showLessItems: true,
                    //只有一页时是否隐藏分页器
                    pageSize:Store.pageSize,
                    hideOnSinglePage: false,
                    //指定每页可以显示多少条
                    pageSizeOptions: ['10', '20', '30', '40','50'],
                    showQuickJumper:true,
                    showTotal:(total, range) => {return <Button>{`共${total}条`}</Button>},
                    //数据总数
                    total:Store.total,
                }}
                columns={this.columns}
            />
        );
    }
}

export default ComTable;
